<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试验有效期监控</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 850px;
            text-align: center;
        }
        
        .header {
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 2.8rem;
            color: #2c3e50;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }
        
        .config-panel {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .config-title {
            font-size: 1.5rem;
            color: #1565c0;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .date-input-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .date-input {
            padding: 12px 15px;
            border: 2px solid #bbdefb;
            border-radius: 8px;
            font-size: 1.1rem;
            width: 200px;
            transition: border-color 0.3s;
        }
        
        .date-input:focus {
            border-color: #2196f3;
            outline: none;
        }
        
        .save-button {
            background: #2196f3;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .save-button:hover {
            background: #0d8aee;
        }
        
        .card {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .expiry-date {
            font-size: 2.2rem;
            color: #3498db;
            margin-bottom: 25px;
            font-weight: 600;
        }
        
        .current-time {
            font-size: 2.5rem;
            color: #2c3e50;
            font-weight: bold;
            margin-bottom: 25px;
        }
        
        .time-label {
            font-size: 1.8rem;
            color: #7f8c8d;
            margin-right: 10px;
        }
        
        .status-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        
        .status-icon {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        
        .status-text {
            font-size: 1.5rem;
            font-weight: 600;
            padding: 8px 20px;
            border-radius: 20px;
        }
        
        .green {
            background-color: #2ecc71;
            color: white;
        }
        
        .yellow {
            background-color: #f1c40f;
            color: white;
        }
        
        .red {
            background-color: #e74c3c;
            color: white;
        }
        
        .info-panel {
            background-color: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
        }
        
        .info-panel h3 {
            color: #3498db;
            margin-bottom: 15px;
            font-size: 1.5rem;
        }
        
        .info-list {
            list-style-type: none;
        }
        
        .info-list li {
            padding: 8px 0;
            font-size: 1.1rem;
            color: #34495e;
            display: flex;
            align-items: center;
        }
        
        .info-list i {
            margin-right: 10px;
            width: 20px;
            color: #3498db;
        }
        
        .footer {
            margin-top: 40px;
            text-align: center;
            color: #7f8c8d;
            font-size: 1rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .expiry-date {
                font-size: 1.8rem;
            }
            
            .current-time {
                font-size: 2rem;
            }
            
            .time-label {
                font-size: 1.5rem;
            }
            
            .status-icon {
                width: 100px;
                height: 100px;
                font-size: 2.8rem;
            }
            
            .date-input-container {
                flex-direction: column;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .expiry-date {
                font-size: 1.5rem;
            }
            
            .current-time {
                font-size: 1.6rem;
            }
            
            .card {
                padding: 20px;
            }
            
            .status-icon {
                width: 80px;
                height: 80px;
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>试验有效期监控</h1>
            <div class="config-panel">
                <div class="config-title">设置试验有效期</div>
                <div class="date-input-container">
                    <input type="date" id="expiryDateInput" class="date-input" value="2025-09-02">
                    <button id="saveButton" class="save-button">保存设置</button>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="expiry-date" id="expiryDateDisplay">
                试验有效期：2025年9月2日
            </div>
            
            <div class="current-time">
                <span class="time-label">当前时间：</span>
                <span id="timeDisplay">2023年11月15日 14:30:45</span>
            </div>
            
            <div class="status-container">
                <div class="status-icon" id="statusIcon">
                    <i class="fas fa-check"></i>
                </div>
                <div class="status-text" id="statusText">状态正常</div>
            </div>
        </div>
        
        <div class="info-panel">
            <h3>状态说明</h3>
            <ul class="info-list">
                <li><i class="fas fa-circle-notch green"></i> 当前时间早于试验有效期 - 状态正常（绿色）</li>
                <li><i class="fas fa-circle-notch yellow"></i> 当前时间等于试验有效期 - 即将到期（黄色）</li>
                <li><i class="fas fa-circle-notch red"></i> 当前时间晚于试验有效期 - 已过期（红色）</li>
            </ul>
        </div>
        
        <div class="footer">
                    </div>
    </div>

    <script>
        // 从本地存储获取试验有效期或使用默认值
        let expiryDate = new Date(localStorage.getItem('expiryDate') || '2025-09-02');
        
        // 初始化日期输入框的值
        document.getElementById('expiryDateInput').value = formatDateForInput(expiryDate);
        
        // 更新显示
        updateExpiryDateDisplay();
        
        // 保存按钮事件
        document.getElementById('saveButton').addEventListener('click', function() {
            const inputDate = new Date(document.getElementById('expiryDateInput').value);
            
            if (isValidDate(inputDate)) {
                expiryDate = inputDate;
                // 保存到本地存储
                localStorage.setItem('expiryDate', formatDateForInput(expiryDate));
                updateExpiryDateDisplay();
                alert('试验有效期已更新！');
            } else {
                alert('请输入有效的日期！');
            }
        });
        
        function formatDateForInput(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        function updateExpiryDateDisplay() {
            const year = expiryDate.getFullYear();
            const month = (expiryDate.getMonth() + 1).toString().padStart(2, '0');
            const day = expiryDate.getDate().toString().padStart(2, '0');
            
            document.getElementById('expiryDateDisplay').textContent = 
                `试验有效期：${year}年${month}月${day}日`;
        }
        
        function isValidDate(d) {
            return d instanceof Date && !isNaN(d);
        }
        
        function updateTime() {
            const now = new Date();
            
            // 格式化日期和时间
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            
            // 更新显示
            document.getElementById('timeDisplay').textContent = 
                `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
            
            // 比较日期并更新状态
            compareDates(now, expiryDate);
        }
        
        function compareDates(current, expiry) {
            // 清除时间部分，只比较日期
            const currentDate = new Date(current.getFullYear(), current.getMonth(), current.getDate());
            const expiryDate = new Date(expiry.getFullYear(), expiry.getMonth(), expiry.getDate());
            
            const statusIcon = document.getElementById('statusIcon');
            const statusText = document.getElementById('statusText');
            
            // 移除所有颜色类
            statusIcon.classList.remove('green', 'yellow', 'red');
            statusText.classList.remove('green', 'yellow', 'red');
            
            if (currentDate < expiryDate) {
                // 当前日期早于试验有效期
                statusIcon.className = 'status-icon green';
                statusIcon.innerHTML = '<i class="fas fa-check"></i>';
                statusText.className = 'status-text green';
                statusText.textContent = '状态正常';
            } else if (currentDate > expiryDate) {
                // 当前日期晚于试验有效期
                statusIcon.className = 'status-icon red';
                statusIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
                statusText.className = 'status-text red';
                statusText.textContent = '已过期';
            } else {
                // 当前日期等于试验有效期
                statusIcon.className = 'status-icon yellow';
                statusIcon.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
                statusText.className = 'status-text yellow';
                statusText.textContent = '今日到期';
            }
        }
        
        // 初始调用
        updateTime();
        
        // 每秒更新一次
        setInterval(updateTime, 1000);
    </script>
</body>
</html>